<template>
  <div class="goinformantgroup container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2">
        <Nav class="hidden-xs-only"></Nav>
      </div>
      <div class="col-sm-9 col-md-10">
        <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
          <el-step title="入群先知" ></el-step>
          <el-step title="选择套餐" ></el-step>
          <el-step title="进 群" ></el-step>
        </el-steps>
        <!--第一步-->
        <ShoppingUnderstand v-show="button_flag===1" @active_event="active_event"></ShoppingUnderstand>
        <!--第二步-->
        <SelectPackage v-show="button_flag===2" :taocanAll="taocanAll" @taocan_event="taocan_event"></SelectPackage>
        <!--第三步-->
        <GroupEntry v-show="button_flag===3" @active_event="active_event" :taocan_name="taocan" :taocan_price="price"></GroupEntry>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import ShoppingUnderstand from "@/views/order/ShoppingUnderstand";
import SelectPackage from "@/views/order/SelectPackage";
import GroupEntry from "@/views/order/GroupEntry";
import {getTaocan} from "../../utils/api";
export default {
  name: "GoInformantGroup",
  components:{
    Nav,ShoppingUnderstand,SelectPackage,GroupEntry
  },
  data(){
    return {
      active:0,
      button_flag:1,
      taocan:{},
      price:'',
      taocanAll:null
    }
  },
  methods:{
    /*自定义事件  子传父 参 页面显示那一步  步骤条显示哪一步*/
    active_event(v,i){
      this.button_flag=v
      this.active=i
    },

    taocan_event(v,i,taocan,price){
      this.button_flag=v
      this.active=i
      this.taocan=taocan
      this.price=price
    }
  },
  watch:{
    button_flag(){
      if(this.button_flag===2){
        if(this.taocan!==""){
          this.active=2
        }
      }
    }
  },
  created() {
    getTaocan().then(res=>{
      this.taocanAll = res.body
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
